<script setup lang="ts">
  import { onMounted, ref, computed } from 'vue'
  const container = ref<HTMLElement>() // container节点
  const blank = ref<HTMLElement>() // blank节点
  const list = ref<any>([]) // 列表
  const page = ref(1) // 当前页数
  const limit = 30 // 一页展示
  // 最大页数
  const maxPage = computed(() => Math.ceil(list.value.length / limit))
  // 真实展示的列表
  const showList = computed(() => list.value.slice(0, page.value * limit))
  const handleScroll = () => {
    // 当前页数与最大页数的比较
    if (page.value > maxPage.value) return
    const clientHeight = container.value?.clientHeight
    const blankTop = blank.value?.getBoundingClientRect().top
    if ((clientHeight + 20) === blankTop) {
      // 出现在视图，则当前页数加1
      page.value++
    }
  }

  onMounted(() => {
    for (let i = 1; i <= 200; i++){
      const obj = {
        tid:i,
        text:i
      };
      list.value.push(obj)
    }
  })
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>
<style scoped>
  #container{
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    box-shadow: 0 3px 12px rgba(98,107,181,.25);
  }
  .sunshine{
    height: 40px;
    line-height: 40px;
  }
  .sunshine:nth-child(2n+1){
    background: rgba(98,107,181,.15);
  }
</style>
